<{include file=$module.'/header.php'}>

<style type="text/css">
	.goods-add .list-block .item-title.label,.goods-add .list-block input[type=tel], .goods-add .list-block .item-inner{font-size: .75rem;}
	.post-voice{display:block;width:2rem;height:2rem;position:absolute;bottom:0.5rem;right:0;background-size:cover!important;margin-right: 10px;}
	.post-voice.start{background:url("/static/app/img/icon-voicer.png") no-repeat;}
	.post-voice.stop{background:url("/static/app/img/icon-stop.png") no-repeat;}
</style>
<div class="page goods-add" id="page-goods-post">
	<header class="bar bar-nav common-bar-nav">
		<a class="pull-left external" href="/<{$module}>/order/index"><i class="fa fa-arrow-left"></i></a>
		<h1 class="title">设备报修</h1>
		<{if $device_id}>
		<a href="javascript:;" onclick="location.reload();" class="pull-right">刷新</a>
		<{/if}>
	</header>
	<div class="btn-submit">
		<a href="javascript:;" class="button button-big button-fill button-danger">提交</a>
	</div>
	<div class="content">

		<{if $device_id}>
		<div class="buttons-tab">
			<a href="#device-add" class="tab-link active button">设备报修</a>
			<a href="#device-detail" class="tab-link button">设备信息</a>
			<a href="#device-status" class="tab-link button">历史记录</a>
		</div>
		<{/if}>
		<div class="tabs">
			<!-- 设备报修 -->
			<div id="device-add" class="tab active">
				<form id="form" >
				<input type="hidden" name="id" value="<{$info.id}>" />
				<input type="hidden" name="do" value="<{$action}>" />
	
				
				<div class="list-block">
					<ul>
						<li>
							<a class="item-link item-content open-popup" data-popup=".popup-life-area">
								<div class="item-inner">
									<div class="item-title label">区域</div>
									<div class="item-input">
										<span id="local-area">请选择区域</span>
										<input id="data-area" type="hidden" name="area_id" value=""/>
									</div>
								</div>
							</a>
						</li>
						<li>
							<a class="item-link item-content open-popup" data-popup=".popup-life-cate">
								<div class="item-inner">
									<div class="item-title label">类别</div>
									<div class="item-input">
										<span id="local-cate">请选择类别</span>
										<input id="data-cate" type="hidden" name="cate_id" value=""/>
									</div>
								</div>
							</a>
						</li>
					</ul>
				</div>
				
				<div class="list-block">
					<ul>
						<li>
							<a class="item-link item-content open-popup" data-popup=".popup-life-zone">
								<div class="item-inner">
									<div class="item-title label">地点</div>
									<div class="item-input">
										<span id="local-zone">请选择地点</span>
										<input id="data-zone" type="hidden" name="zone_id" value=""/>
									</div>
								</div>
							</a>
						</li>
						<li class="hide" id="bx_shifu">
							<a class="item-link item-content">
								<div class="item-inner">
									<div class="item-title label">师傅</div>
									<div class="item-input">
										<span id="local-shifu">请选择师傅</span>
										<input id="data-shifu" type="hidden" name="shifu_id" value="0"/>
										<!-- <input id="data-zhiban" type="hidden" name="is_zhiban" value="0"/> -->
									</div>
								</div>
							</a>
						</li>
						<li>
							<div class="item-content">
								<div class="item-inner">
									<div class="item-title ">位置</div>
									<div class="item-input">
										<input type="text" name="local" value="<{$info.local}>" placeholder="请输入位置">
									</div>
								</div>
							</div>
						</li>

					</ul>
				</div>
				
				<div class="list-block">
					<ul>
						<li>
							<div class="item-content">
								<div class="item-inner">
									<div class="item-title ">标题</div>
									<div class="item-input">
										<input type="text" name="title" value="<{$info.title}>" placeholder="请输入标题">
									</div>
								</div>
							</div>
						</li>
					</ul>
				</div>

				<div class="list-block m-b-0 other-info">
					<ul>
						<li class="align-top">
							<div class="item-content">
								<div class="item-inner">
									<div class="item-input">
										<textarea id="data-details" name="intro" placeholder="请输入描述"><{$info.intro}></textarea>
									</div>
									<a id="post-voice" data-id="0" class="post-voice start"></a>
								</div>
							</div>
						</li>
					</ul>
				</div>
				
				<{if !$is_wx}>
				<div class="list-block">
					<ul>
						<li>
							<div class="item-content">
								<div class="item-inner">
									<div class="item-title ">录音</div>
									<div class="item-after">
										<audio class="recPlay"></audio>
									</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<{/if}>
				
				<div class="content-block-title">图片</div>
				<div class="image-container muti-upload">
					<ul id="upload-list" class="upload-list p-b-1">
						<li class="list-button"><input id="upload-select" type="file" accept="image/*" multiple><i class="fa fa-plus"></i></li>
						<{if $photos}>
						<{foreach $photos as $val}>
						<li><img src='<{$val}>'><a href='javascript:;' class='remove'>删除</a><input type='hidden' name='photo[]' value='<{$val}>'></li>
						<{/foreach}>
						<{/if}>
					</ul>
				</div>

				</form>
			</div>
			<!-- 设备信息 -->
			<div id="device-detail" class="tab">
				<{if $device}>
				<div class="list-block">
					<ul>
						<li>
							<a class="item-link item-content">
								<div class="item-inner">
									<div class="item-title label">设备名称</div>
									<div class="item-after">
										<span id="local-device"><{$device.name}></span>
										<input id="data-device" type="hidden" name="device_id" value="<{$device.id}>"/>
									</div>
								</div>
							</a>
						</li>
						<li>
							<a class="item-link item-content">
								<div class="item-inner">
									<div class="item-title label">设备编码</div>
									<div class="item-after">
										<span><{$device.setting.bianma}></span>
									</div>
								</div>
							</a>
						</li>
						<li>
							<a class="item-link item-content">
								<div class="item-inner">
									<div class="item-title label">设备型号</div>
									<div class="item-after">
										<span><{$device.setting.xinghao}></span>
									</div>
								</div>
							</a>
						</li>
						<li>
							<a class="item-link item-content">
								<div class="item-inner">
									<div class="item-title label">生产日期</div>
									<div class="item-after">
										<span><{$device.setting.riqi}></span>
									</div>
								</div>
							</a>
						</li>
						<li>
							<a class="item-link item-content">
								<div class="item-inner">
									<div class="item-title label">设备厂家</div>
									<div class="item-after">
										<span><{$device.setting.changjia}></span>
									</div>
								</div>
							</a>
						</li>
					</ul>
				</div>
				<{/if}>
			</div>
			<!-- 历史记录 -->
			<div id="device-status" class="tab">
			<{if $device.logs}>
				<{foreach $device.logs as $key => $val}>
				<div class="order-status-item">
					<div class="guide">
						<{if $device.logs_maxid != $key}>
							<img src="/static/app/img/order_status_service_grey.png" alt="" />
						<{else}>
							<img src="/static/app/img/order_status_service.png" alt="" />
						<{/if}>
					</div>
					<div class="order-status-info">
						<div class="arrow-left"></div>
						<div class="clearfix"><{$val.intro.msg}> <span class="time pull-right"><{$val.add_time}></span></div>
						<div class="tips"><{$val.intro.intro}></div>
						

						<{if $val.intro.photos}>
						<div class="image-container muti-upload">
							<ul id="upload-list" class="upload-list p-b-0">
								<{foreach $val.intro.photos as $v}>
								<li><img src="<{$v}>"></li>
								<{/foreach}>
							</ul>
						</div>
						<{/if}>
						
					</div>
				</div>
				<{/foreach}>
			<{/if}>
			</div>
		</div>

		<div class="ui-footspace"></div>
	</div>
</div>


<!-- 一级区域 -->
<div class="popup popup-life-area uc-post-lifecate">
	<header class="bar bar-nav">
		<button class="button button-link pull-right close-popup">关闭</button>
		<h1 class="title">选择区域</h1>
	</header>	
	<div class="content">
		<div class="list-block m-a-0 list-block-first">
			<ul id="uc-post-area">
			 	<{foreach $areas as $k => $v}>
				<li>
					<a class="item-content" data-no="area" data-id="<{$v.id}>" data-name="<{$v.name}>">
						<div class="item-inner"> <{$v.name}></div>
					</a>
				</li>
				<{/foreach}>
			</ul>
		</div>
	</div>
</div>
<div class="popup popup-life-area1 uc-post-lifecate">
	<header class="bar bar-nav">
		<button class="button button-link pull-right close-popup">关闭</button>
		<h1 class="title">选择区域</h1>
	</header>	
	<div class="content">
		<div class="list-block m-a-0 list-block-first">
			<ul id="uc-post-area1">
			 	
			</ul>
		</div>
	</div>
</div>
<!-- 一级分类 -->
<div class="popup popup-life-cate uc-post-lifecate">
	<header class="bar bar-nav">
		<button class="button button-link pull-right close-popup">关闭</button>
		<h1 class="title">选择分类</h1>
	</header>	
	<div class="content">
		<div class="list-block m-a-0 list-block-first">
			<ul id="uc-post-cate">
			 	<{foreach $cates as $k => $v}>
				<li>
					<a class="item-content" data-no="cate" data-id="<{$v.id}>" data-name="<{$v.name}>">
						<div class="item-inner"> <{$v.name}></div>
					</a>
				</li>
				<{/foreach}>
			</ul>
		</div>
	</div>
</div>
<div class="popup popup-life-cate1 uc-post-lifecate">
	<header class="bar bar-nav">
		<button class="button button-link pull-right close-popup">关闭</button>
		<h1 class="title">选择分类</h1>
	</header>	
	<div class="content">
		<div class="list-block m-a-0 list-block-first">
			<ul id="uc-post-cate1">
			 	
			</ul>
		</div>
	</div>
</div>
<!-- 一级地点 -->
<div class="popup popup-life-zone uc-post-lifecate">
	<header class="bar bar-nav">
		<button class="button button-link pull-right close-popup">关闭</button>
		<h1 class="title">选择地点</h1>
	</header>	
	<div class="content">
		<div class="list-block m-a-0 list-block-first">
			<ul id="uc-post-zone">
			 	<{foreach $zones as $k => $v}>
				<li>
					<a class="item-content" data-no="zone" data-id="<{$v.id}>" data-name="<{$v.name}>">
						<div class="item-inner"> <{$v.name}></div>
					</a>
				</li>
				<{/foreach}>
			</ul>
		</div>
	</div>
</div>
<div class="popup popup-life-zone1 uc-post-lifecate">
	<header class="bar bar-nav">
		<button class="button button-link pull-right close-popup">关闭</button>
		<h1 class="title">选择地点</h1>
	</header>	
	<div class="content">
		<div class="list-block m-a-0 list-block-first">
			<ul id="uc-post-zone1">
			 	
			</ul>
		</div>
	</div>
</div>
<script>
$(function(){
	// 一级分类
	$(document).on("click","#uc-post-area a,#uc-post-cate a,#uc-post-zone a",function(e){
		var data_no = $(this).attr("data-no");
		var data_id = $(this).attr("data-id");
		var data_name = $(this).attr("data-name");
		$.post("/<{$routeUrl}>/ajax_child",{id:data_id,type:data_no},function(result){
			if(result.length > 1){
				$("#uc-post-"+data_no+"1").html(result);
				// $("#uc-post-"+data_no).hide();
				$.closeModal(".popup-life-"+data_no+"");
				$.popup(".popup-life-"+data_no+"1");
			}
		});
	});

	// 二级分类
	$(document).on("click","#uc-post-area1 a,#uc-post-cate1 a,#uc-post-zone1 a",function(e){
		var data_no = $(this).attr("data-no");
		var data_id = $(this).attr("data-id");
		var data_name = $(this).attr("data-name");
		$("#data-"+data_no).val(data_id);
		$("#local-"+data_no).html(data_name);
		$.closeModal();

		// $.post("/<{$routeUrl}>/ajax_shifu",{id:data_id,zone_id:zone},function(result){
		// 	if(result.code == 1){
		// 		$("#data-shifu").val(result.id);
		// 		$("#local-shifu").html(result.realname +' '+result.tel);
		// 		$("#bx_shifu").removeClass('hide');
		// 		$.closeModal(".popup-life-cate");
		// 		return false;
		// 	}
		// 	if(result.length > 100){
		// 		$("#uc-post-shifu").html(result);
		// 		// $("#local-city").html(name);
		// 		$.closeModal(".popup-life-cate");
		// 		$.popup(".popup-life-shifu");
		// 	}else{
		// 		$.closeModal(".popup-life-cate");
		// 	}
		// });
	});
});
</script>
<{if !$is_wx}>
<script type='text/javascript' src="/static/app/js/recorder.mp3.min.js"></script>
<script type="text/javascript">
		
	
	$("#post-voice").click(function(){
		dataid = $(this).attr("data-id");
		if(dataid == 0){
		    rec_start();
		    $(this).attr("data-id",1);
		    $(this).removeClass("start");
		    $(this).addClass("stop");
		}else{
			rec_stop();
		    $(this).attr("data-id",0);
		    $(this).removeClass("stop");
		    $(this).addClass("start");
		}
	});



	var rec=Recorder();
	
	var recblob={};
	function rec_start(){
		// var dialog=createDelayDialog();
		rec.open(function(){
			// dialog&&dialog.Cancel();
			rec.start();
		});
	};
	function rec_stop(){
		var t1=Date.now();
        rec.stop(function(blob,duration){//到达指定条件停止录音
        	var id=RandomKey(16);
			recblob[id]={blob:blob,set:$.extend({},rec.set),time:duration};

			//-----↓↓↓以下才是主要代码↓↓↓-------
			var reader=new FileReader();
			reader.onloadend=function(){
				var upfile_b64 = (/.+;\s*base64\s*,\s*(.+)$/i.exec(reader.result)||[])[1];
				$.post('/<{$module}>/api/mp3upload', { mime:blob.type,base64: upfile_b64 }, function(data){ 
			    	if(data != 'error'){
			    		// $('#talk_btn').hide();
		    			txt = "<input type='hidden' name='data[voice]' value='"+ data +"'>";
		    			$("#upload-list").append(txt);
				   }else{
				  	 error("上传失败");
				   }
			    });
			};
			reader.readAsDataURL(blob);

			//-----↑↑↑以上才是主要代码↑↑↑-------
            // console.log(URL.createObjectURL(blob),"时长:"+duration+"ms");
            rec.close();//释放录音资源
            //已经拿到blob文件对象想干嘛就干嘛：立即播放、上传
            

            rec_play(id);
            // /*立即播放例子*/
            // var audio=document.createElement("audio");
            // audio.controls=true;
            // document.body.appendChild(audio);
            // //简单的一哔
            // audio.src=URL.createObjectURL(blob);
            // audio.play();
            
        },function(msg){
            console.log("录音失败:"+msg);
        });
	};

	function rec_play(key){
		var o=recblob[key];
		if(o){
			var audio=$(".recPlay")[0];
			audio.controls=true;
			if(!(audio.ended || audio.paused)){
				audio.pause();
			};
			o.play=(o.play||0)+1;
			var end=function(blob){
				audio.src=URL.createObjectURL(blob);
				audio.play();
			};
			end(o.blob);
		};
	};

	// function createDelayDialog(){
	// 	var	is_mobile = <{isMobile}>;
	//     if(is_mobile){//只针对移动端
	//         return new Alert Dialog Component
	//             .Message("录音功能需要麦克风权限，请允许；如果未看到任何请求，请点击忽略~")
	//             .Button("忽略")
	//             .OnClick(function(){//明确是用户点击的按钮，此时代表浏览器没有发起任何权限请求
	//                 //此处执行fail逻辑
	//                 console.log("无法录音：权限请求被忽略");
	//             })
	//             .OnCancel(NOOP)//自动取消的对话框不需要任何处理
	//             .Delay(8000); //延迟8秒显示，这么久还没有操作基本可以判定浏览器有毛病
	//     };
	// };

	function RandomKey(){
		return "randomkey"+(RandomKey.idx++);
	};
	RandomKey.idx=0;

</script>
<{/if}>
<script src="/static/app/js/upload.js"></script>
<script>
$(function(){
	//提交
	$(document).on('click', '.goods-add .button-danger', function(){
		var $button = $(this);
		if($button.hasClass('disabled')) {
			return false;
		}
		var cate = $.trim($('[name="cate_id"]').val());
		if(!cate) {
			$.toast('分类不能为空');
			return false;
		}
		var zone = $.trim($('[name="zone_id"]').val());
		if(!zone) {
			$.toast('地点不能为空');
			return false;
		}
		var local = $.trim($('[name="local"]').val());
		if(!local) {
			$.toast('位置不能为空');
			return false;
		}
		var title = $.trim($('[name="title"]').val());
		if(!title) {
			$.toast('标题不能为空');
			return false;
		}
		
		// e.preventDefault();
		var params = $('#form').serializeArray();
		$button.addClass('disabled');
		$.post("/<{$routeUrl}>/<{$action}>", params, function(response){
			if(response.code == 0){
				$button.removeClass('disabled');
				$.toast(response.msg);
				return false;
			}
			if(response.code == 1){
				$.toast(response.msg, response.url);
			}
		});
	});

	//上传图片
	$(document).on('change', '#upload-select', function(e){ 
		for(var i=0;i<this.files.length;i++){
			// console.log(this.files[i]);

			lhj(this.files[i], {
			    width:1000,
			    height:1000,
			    // 压缩成功
			    done: function (results) {
					postdata = {
						base64: results.base64,
						name: results.origin.name,
						type: results.origin.type,
						size: results.origin.size,
					};
					$.post('/<{$module}>/api/upload', postdata, function(response){
						if(response.code == 0){
							error("上传失败");
							return false;
						}
						if(response.code == 1){
							txt = "<li><img src='" + results.base64+"'><a href='javascript:;' class='remove'>删除</a><input type='hidden' name='photo[]' value='"+ response.data +"'></li>";
			    			$("#upload-list").append(txt);
						}
					});
			    }
			});
		}
	});
	//删除图片
	$(document).on('click', '.remove', function(e){ 
	 	var file_id = $(this).parent().find("input").val();
		$.post('/<{$module}>/api/remove', { file_id: file_id }, function(data){ 
		});
	 	$(this).parent().remove();
	});

	// 手机搜索
	$(document).on("click",".icon-search",function(e){
		var tel = $.trim($('[name="tel"]').val());
		if(!tel) {
			$.toast('手机号不能为空');
			return false;
		}
		$.post("/<{$module}>/api/ajaxtel",{tel:tel},function(response){
			if(response.code == 0){
				$.toast('手机号不存在');
				return false;
			}
			if(response.code == 1){
				$.toast('客户已找到');
				$("#data-realname").val(response.realname);
				$("#data-company").val(response.company);
				$("#data-username").val(response.username);
			}
		});
	});

	
	$.init();
});
</script>
<{include file=$module.'/wx.php'}>
<{include file=$module.'/footer.php'}>